<template>
  <el-menu
      :default-active="1"
      mode="horizontal"
      background-color=#1D76D9FF
      text-color="#fff"
      active-text-color="#ffd04b">

    <el-menu-item index="2" @click="toIndex">主页</el-menu-item>
    <el-menu-item index="3" @click="toScholor">学者库</el-menu-item>
    <el-menu-item index="4" v-if="isLogin" @click="toUser">个人中心</el-menu-item>
    <el-menu-item index="5" v-if="isLogin && isAuthorized" @click="toPortal">我的门户</el-menu-item>

    <div class="diy">
        <div class="diy-block"/>
        <div class="diy-slot">
          <slot class="slot"/>
        </div>

        <div class="diy-block"/>
        <div class="loginRegsterBtn">
          <el-dropdown v-if="!isLogin">
            <el-button size="mini" type="primary" @click="login()">
              登录
              <el-icon class="el-icon--right"><arrow-down/></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="login">立即登录</el-dropdown-item>
                <el-dropdown-item @click="register">注册</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-dropdown v-else>
            <el-avatar :size="35" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
                <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>

    </div>

  </el-menu>
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs"
import { ElMessage } from "element-plus"
import { ArrowDown } from '@element-plus/icons'
export default {
  name: "IndexNavbar",
  components: {
    ArrowDown,
  },
  props: {
    personal: false,
  },
  created() {
    let user = JSON.parse(localStorage.getItem('user'))
    console.log(user)
    if (user != null) {
      axios.post('/api/user/token', qs.stringify({ token: user.token }))
        .then(res => {
          console.log(res)
          if (res.data.code === 1) {
            localStorage.removeItem('user')
            localStorage.removeItem('token')
            
            this.isLogin = false
            if (this.$props.personal) {
              alert('登录已过期')
              this.$router.push('/user/sign/login')
            } else {
              ElMessage.error({
                message: "登录已过期",
                showClose: true
              })
            }
          } else {
            if (res.data.data != null && res.data.data.authorId != null) {
              this.authorId = res.data.data.authorId
              this.isAuthorized = true
            }
            this.isLogin = true
          }
        })
    } else {
      this.isLogin = false
      if (this.$props.personal) {
        alert('请先登录')
        this.$router.push('/user/sign/login')
      }
    }
  },
  data() {
    return {
      isLogin: false,
      isAuthorized: false,
      authorId: undefined
    }
  },
  methods: {
    login() {
      window.open('/user/sign/login', '_self')
    },
    register() {
      window.open('/user/sign/register', '_self')
    },
    logout() {
      localStorage.removeItem('user')
      localStorage.removeItem('token')
      window.open('/user/sign/login', '_self')
    },
    toIndex() {
      window.open('/index', '_self')
    },
    toUser() {
      window.open('/user', '_self')
    },
    toScholor() {
      window.open('/authorIndex', '_self')
    },
    toPortal() {
      const { href } = this.$router.resolve({
        path: '/portal',
        query: {
          authorId: this.authorId
        }
      })
      window.open(href, '_self')
    }
  }
}
</script>

<style scoped>
.loginRegsterBtn {
    /* width: 125px; */
    margin: auto;
    margin-top: 15px;
    margin-left: 40px;
    margin-right: 10px;
    background-color: transparent;
  }
.diy {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 25% !important;
}
.diy-block {
  width: 13%;
  height: 100%;
}
.diy-slot {
  width: 70%;
}

</style>